<template>
  <!-- 底图切换 -->
  <div id="baseMapContainer">
    <div class="mapborder vtile-border">
      <img
        :src="vectortileSrc"
        class="mapimg"
        @click="basemapChangeClick('imageBaseMap')"
      />
      <p class="fontp">影像地图</p>
    </div>
    <div class="mapborder tile-border">
      <img
        :src="tileSrc"
        class="mapimg"
        @click="basemapChangeClick('vectorBaseMap')"
      />
      <p class="fontp">矢量地图</p>
    </div>
  </div>
</template>

<script>
// import { mapMutations } from "vuex";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import Basemap from "@arcgis/core/Basemap";
import TileLayer from "@arcgis/core/layers/TileLayer";
export default {
  props: {
    currentbasemap: { default: () => {} },
    mapview: { default: () => {} },
  },
  data() {
    return {
      currentmap: "imageBaseMap",
      tileSrc: require("../../assets/images/basemap/shiliang.png"),
      vectortileSrc: require("../../assets/images/basemap/yingxiang.png"),
      tileVectorLayerBase: undefined,
      tileImagelayerBase: undefined,
      vectorBaseMap: undefined,
      imageBaseMap: undefined,
    };
  },

  created() {},
  watch: {
    // currentmap: function (newVal, oldVal) {
    //   this.basemapChange({
    //     newmap: newVal,
    //     oldmap: oldVal,
    //   });
    // },
  },
  mounted() {
    console.log("BaseMapConponents mounted");
    let imageLayer = undefined;
    let imageAnoLayer = undefined;
    let vectorLayer = undefined;
    let vectorAnoLayer = undefined;
    this.imageBaseMap = new Basemap({
      id: "imageBaseMap",
      title: "影像底图",
      // baseLayers: [imageLayer, imageAnoLayer],
    });
    this.vectorBaseMap = new Basemap({
      id: "vectorBaseMap",
      title: "矢量底图",
      // baseLayers: [vectorLayer, vectorAnoLayer],
    });
    // 影像底图图层
    if (
      window.mapConfig.baseMapLayers.imageLayer.type === "tdt-tile" &&
      window.mapConfig.baseMapLayers.imageLayer.url
    ) {
      imageLayer = new WebTileLayer({
        title: "天地图影像底图图层",
        urlTemplate: window.mapConfig.baseMapLayers.imageLayer.url,
        subDomains: window.mapConfig.tdtSubDomains,
        tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
        spatialReference: {
          wkid: 4490,
        },
        fullExtent: {
          xmin: -180,
          ymin: -90,
          xmax: 180,
          ymax: 90,
          spatialReference: 4490,
        },
      });
      this.imageBaseMap.baseLayers.add(imageLayer);
    } else if (window.mapConfig.baseMapLayers.imageLayer.url) {
      imageLayer = new TileLayer({
        title: "影像底图图层",
        url: window.mapConfig.baseMapLayers.imageLayer.url,
      });
      this.imageBaseMap.baseLayers.add(imageLayer);
    }
    // 影像注记图层
    if (
      window.mapConfig.baseMapLayers.imageAnoLayer.type === "tdt-tile" &&
      window.mapConfig.baseMapLayers.imageAnoLayer.url
    ) {
      imageAnoLayer = new WebTileLayer({
        title: "天地图影像注记图层",
        urlTemplate: window.mapConfig.baseMapLayers.imageAnoLayer.url,
        subDomains: window.mapConfig.tdtSubDomains,
        tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
        spatialReference: {
          wkid: 4490,
        },
        fullExtent: {
          xmin: -180,
          ymin: -90,
          xmax: 180,
          ymax: 90,
          spatialReference: 4490,
        },
      });
      this.imageBaseMap.baseLayers.add(imageAnoLayer);
    } else if (window.mapConfig.baseMapLayers.imageAnoLayer.url) {
      imageAnoLayer = new TileLayer({
        title: "影像注记图层",
        url: window.mapConfig.baseMapLayers.imageAnoLayer.url,
      });
      this.imageBaseMap.baseLayers.add(imageAnoLayer);
    }
    // 矢量底图图层
    if (
      window.mapConfig.baseMapLayers.vectorLayer.type === "tdt-tile" &&
      window.mapConfig.baseMapLayers.vectorLayer.url
    ) {
      vectorLayer = new WebTileLayer({
        title: "天地图矢量底图图层",
        urlTemplate: window.mapConfig.baseMapLayers.vectorLayer.url,
        subDomains: window.mapConfig.tdtSubDomains,
        tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
        spatialReference: {
          wkid: 4490,
        },
        fullExtent: {
          xmin: -180,
          ymin: -90,
          xmax: 180,
          ymax: 90,
          spatialReference: 4490,
        },
      });
      this.vectorBaseMap.baseLayers.add(vectorLayer);
    } else if (window.mapConfig.baseMapLayers.vectorLayer.url) {
      vectorLayer = new TileLayer({
        title: "矢量底图图层",
        url: window.mapConfig.baseMapLayers.vectorLayer.url,
      });
      this.vectorBaseMap.baseLayers.add(vectorLayer);
    }
    // 矢量注记图层
    if (
      window.mapConfig.baseMapLayers.vectorAnoLayer.type === "tdt-tile" &&
      window.mapConfig.baseMapLayers.vectorAnoLayer.url
    ) {
      vectorAnoLayer = new WebTileLayer({
        title: "天地图矢量注记图层",
        urlTemplate: window.mapConfig.baseMapLayers.vectorAnoLayer.url,
        subDomains: window.mapConfig.tdtSubDomains,
        tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
        spatialReference: {
          wkid: 4490,
        },
        fullExtent: {
          xmin: -180,
          ymin: -90,
          xmax: 180,
          ymax: 90,
          spatialReference: 4490,
        },
      });
      this.vectorBaseMap.baseLayers.add(vectorAnoLayer);
    } else if (window.mapConfig.baseMapLayers.vectorAnoLayer.url) {
      vectorAnoLayer = new TileLayer({
        title: "矢量注记图层",
        url: window.mapConfig.baseMapLayers.vectorAnoLayer.url,
      });
      this.vectorBaseMap.baseLayers.add(vectorAnoLayer);
    }

    // this.mapview.map.basemap = this.imageBaseMap;
  },
  methods: {
    // ...mapMutations("mapStore", ["basemapChange"]), //将 `this.basemapChange(obj)` 映射为 `this.$store.commit(obj)`
    basemapChangeClick(type) {
      // this.currentmap = type;
      if (this.currentmap === type) return;
      else {
        switch (type) {
          case "imageBaseMap":
            this.mapview.map.basemap = this.imageBaseMap;
            break;
          case "vectorBaseMap":
            this.mapview.map.basemap = this.vectorBaseMap;
            break;
          default:
            this.mapview.map.basemap = this.imageBaseMap;
            break;
        }
        this.currentmap = type;
      }
    },
    basemapChange(paramObj) {
      this.tileImagelayerBase = this.currentbasemap;
      let oldmap = paramObj.oldmap;
      let newmap = paramObj.newmap;
      //剔除老底图
      // this.mapview.map.remove(this.currentbasemap)

      switch (oldmap) {
        case "tileVector":
          this.mapview.map.remove(this.tileVectorLayerBase);
          break;
        case "tileImage":
          this.mapview.map.remove(this.tileImagelayerBase);
          break;
      }
      //切换新底图
      switch (newmap) {
        case "tileImage":
          this.mapview.map.add(this.tileImagelayerBase, 0);
          break;
        case "tileVector":
          if (this.tileVectorLayerBase) {
            this.mapview.map.add(this.tileVectorLayerBase, 0);
          } else {
            //   state.tileVectorLayerBase = new TileLayer({
            //     title: "矢量电子地图",
            //     url: window.mapConfig.TileLayer.tileVectorLayer,
            //   });
            this.tileVectorLayerBase = new WebTileLayer({
              title: "天地图影像",
              urlTemplate: window.mapConfig.baseMapLayers.tdtLayer.vec_c,
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
              spatialReference: {
                wkid: 4490,
              },
              fullExtent: {
                xmin: -180,
                ymin: -90,
                xmax: 180,
                ymax: 90,
                spatialReference: 4490,
              },
            });
            this.mapview.map.add(this.tileVectorLayerBase, 0);
          }
          break;
      }
    },
  },
};
</script>

<style>
#baseMapContainer {
  width: 150px;
  height: 55px;
  margin: 0 auto;
}

.mapborder {
  width: 70px;
  height: 80px;
  text-align: center;
}

.mapimg:hover {
  transform: translateY(-3px);
  transition: all 0.1s;
}

.mapborder p {
  position: absolute;
  z-index: 1000;
  margin-top: -22px;
  background-color: rgba(54, 54, 53, 0.9);
  color: rgb(255, 255, 255);
  width: 100%;
}

.vtile-border {
  position: absolute;
  left: 3px;
  top: 0px;
}

.tile-border {
  position: absolute;
  left: 80px;
  top: 0px;
}

.fontp {
  font-size: 12px;
}

img {
  border-radius: 8px;
  cursor: pointer;
}
</style>
